<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>cesium 添加点</title>
  <link rel="stylesheet" href="./css/demo.css" />
  <script src="../lib/csmMap.min.js"></script>
  <style>
    .btn-wrap {
      top: 0;
      right: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      z-index: 9;
      background-color: #7bbfea;
      color: #ffffff;
    }

    ul li {
      list-style: none;
    }

    .btn-wrap>li {
      display: inline-block;
      padding: 6px 8px;
      font-size: 14px;
      cursor: pointer;
    }

    .btn-wrap>li:not(:last-child) {
      border-right: 1px solid #d9d9d9;
    }

    .btn-wrap>li:hover {
      color: #00ffff;
    }
  </style>
</head>

<body>
  <!-- cesium地图 -->
  <ul id="btn" class="btn-wrap">
    <li class="btn-item">添加标记</li>
  </ul>
  <div id="csmContainer"></div>
</body>

<script>
  const imageLayerIds = ['img', 'cia']
  const vectorLayerIds = ['vec', 'cva']
  const terrainLayerIds = ['ter', 'cta']

  const WMTSToken = 'd91491773166833755634fff1e3f0c4e'
  const WMTSImageries = [
    {
      id: 'img',
      url: 'http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + WMTSToken,
      layer: 'img_w',
      // style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图影像'),
      name: '天地图影像' //图层命名
    },
    {
      id: 'cia',
      url: 'http://{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=' + WMTSToken,
      layer: 'cia_w',
      // style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图影像标注'),
      name: '天地图影像标注'
    },
    {
      id: 'vec',
      url: 'http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + WMTSToken,
      layer: 'vec_w',
      style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图基础'),
      name: '天地图基础'
    },
    {
      id: 'cva',
      url: 'http://{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=' + WMTSToken,
      layer: 'cva_w',
      style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图基础标注'),
      name: '天地图基础标注'
    },
    {
      id: 'ter',
      url: 'http://{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=' + WMTSToken,
      layer: 'ter_w',
      style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图地形'),
      name: '天地图地形'
    },
    {
      id: 'cta',
      url: 'http://{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=' + WMTSToken,
      layer: 'cta_w',
      style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      // credit: new Cesium.Credit('天地图地形标注'),
      name: '天地图地形标注'
    }
  ]

  const cmsMap = new CsmMap('csmContainer', {
    jsUrl: './cesium_1.95/Build/Cesium/Cesium.js',
    cssUrl: './cesium_1.95/Build/Cesium/Widgets/widgets.css',
    center: [86.35332596282456, 41.6864195861039, 2500000],
    WMTSImageries
  })
  cmsMap.on('load', () => {
    console.log(cmsMap, 'cmsMap...')
    addPoints()
  })

  // 切换底图
  function addPoints () {
    const points = [
      {
        id: 'point1',
        name: '点位1',
        coordinate: [116.397128, 39.916527],
        description: '这是一个点位1',
        pixelSize: 10,
        outlineWidth: 5,
        properties: {},
        color: Cesium.Color.fromCssColorString('#66FF46').withAlpha(1),
        outlineColor: Cesium.Color.fromCssColorString('#66FF46').withAlpha(0.3),
        show: true
      },
      {
        id: 'point2',
        name: '点位2',
        coordinate: [116.39670252, 39.92647015],
        description: '这是一个点位2',
        pixelSize: 8,
        outlineWidth: 3,
        properties: {},
        color: Cesium.Color.fromCssColorString('#7bbfea').withAlpha(1),
        outlineColor: Cesium.Color.fromCssColorString('#7bbfea').withAlpha(0.3),
        show: true
      }
    ]
    cmsMap.flyTo({ coordinate: [...points[0].coordinate, 5000] })
    const pointEntity = cmsMap.addPoints(points)
    console.log(pointEntity, 'pointEntity...')
  }

</script>

</html>